<template>
  <div class="contentDiv">
    <div class="flexStart">
      <div
        class="contentTitle"
        ref="contentTitle"
        draggable="true"
        @dragstart="(e) => dragstart(e, list1[0])"
        @dragend="dragend"
      >
        11111
      </div>
      <div class="icon-box" ref="menu_item">
        <div
          class="item"
          v-for="item in list2"
          :key="item.id"
          :ref="item.id"
          :style="{
            top: `${item.top - 16}px`,
            left: `${item.left - 85}px`,
            'z-index': `${item.zIndex}`,
          }"
          @mousedown="(e) => mousedown(e, item)"
        >
          <div style="width: 150px; height: 50px; background: #fff"></div>
          <!-- <template v-if="item.code === 'Carousel'">
          <component
            :is="item.code"
            style="width: 200px; user-select: none"
          ></component>
        </template>
        <template v-else>
          <component
            :is="item.code"
            style="width: 400px; user-select: none"
          ></component>
        </template> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
const contentTitle = ref(null);
// console.log(contentTitle.value);
const menu_item = ref(null);
const menuDom = ref(null);
onMounted(() => {
  menuDom.value = menu_item.value;

  //   console.log(document.querySelector(".icon-box"));
  menu_item.value.classList.add("newClass");
});
const dragItem = ref({});
const moveItem = ref({});
const list2 = ref([]);
const list1 = reactive([
  {
    code: "Carousel",
    name: "轮播图"
   , id: 1
  },
  { code: "List", name: "列表内容", id: 2 },
  { code: "Divider", name: "分割线", id: 3 },
]);
const dragstart = (e, item) => {
  dragItem.value = item;
//   console.log(item);
  //绑定侦听事件
  menuDom.value.addEventListener("dragenter", dragenter);
  // 在目标元素经过 必须要阻止默认行为 否则不能触发drop
  menuDom.value.addEventListener("dragover", dragover);
  // 离开目标元素时设置元素的放置行为——不能拖放
  menuDom.value.addEventListener("dragleave", dragleave);
  // 拖动元素在目标元素松手时添加元素到画布
  menuDom.value.addEventListener("drop", drop);
};
const dragend = (e) => {
  menuDom.value.removeEventListener("dragenter", dragenter);
  menuDom.value.removeEventListener("dragover", dragover);
  menuDom.value.removeEventListener("dragleave", dragleave);
  menuDom.value.removeEventListener("drop", drop);
};

const dragenter = (e) => {
  e.dataTransfer.dropEffect = "move";
};
const dragover = (e) => {
  console.log("dragover");
  e.preventDefault();
};
const dragleave = (e) => {
  console.log("dragleave");
  e.dataTransfer.dropEffect = "none";
};
const drop = (e) => {
  const { code } = dragItem.value;
  list2.value.push({
    top: e.offsetY,
    left: e.offsetX,
    zIndex: 1,
    code: code,
    id: Date.parse(new Date()),
  });
  dragItem.value = null;
};
const mousedown = (e, item) => {
  moveItem.value = item;

  document.addEventListener("mousemove", mousemove);
  document.addEventListener("mouseup", mouseup);
};

const mousemove = (e) => {
  let { clientX, clientY } = e;

  const moveIdx = list2.value.findIndex((item) => {
    return item.id == moveItem.value.id;
  });

  //   console.log(moveIdx);
  let newList2 = JSON.parse(JSON.stringify(list2.value));

  newList2[moveIdx].top = clientY - 100;
  newList2[moveIdx].left = clientX - 380;
  list2.value = newList2;
};
const mouseup = (e) => {
  document.removeEventListener("mousemove", mousemove);
  document.removeEventListener("mouseup", mouseup);
};

</script>

<style lang="scss" scoped>
.contentTitle {
  width: 200px;
  height: 200px;
  background: #f00;
  color: #fff;
}
.newClass {
  width: 600px;
  height:600px;
  background: #ff0;
  color: #000;
}
</style>
